<template>
  <div
    class="w-full px-2 pb-3 h-auto rounded-md bg-white flex flex-col justify-start"
  >
    <div
      class="w-full h-[30px] text-center text-[16px] mt-4 font-bold text-[#333]"
    >
      请对本次服务做出评价
    </div>
    <div class="flex justify-center items-center">
      <van-rate
        v-model="rateValue"
        :size="30"
        :gutter="6"
        color="#ffd21e"
        void-icon="star"
        void-color="#eee"
      />
      <span class="ml-3 w-[80px] text-[14px] font-medium text-[#333]">{{
        rateText
      }}</span>
    </div>
    <!-- 不满意原因 -->
    <template v-if="rateValue < 3">
      <van-row :gutter="10" class="my-2">
        <van-col :span="12" v-for="(item, index) in unReason" :key="item.id">
          <span
            :class="
              active === index
                ? 'border-[#48a3ff] text-[#48a3ff]'
                : 'border-[#E5E5E5] text-[#666]'
            "
            class="w-full inline-flex h-[30px] mb-2 text-[13px] border-[1px] rounded justify-center items-center"
            @click.stop="handleChangeReason(item.content, index)"
            >{{ item.content }}</span
          >
        </van-col>
      </van-row>
      <van-row>
        <van-form ref="formRef" style="width: 100%">
          <van-field
            span="24"
            v-model="inputText"
            class="border-[#E5E5E5] border-[1px] rounded"
            rows="3"
            autosize
            name="inputText"
            type="textarea"
            maxlength="200"
            :rules="[{ required: true, message: '请提供意见' }]"
            show-word-limit
            label=""
            placeholder="希望您提出意见"
            @update:model-value="handleInput"
          />
        </van-form>
      </van-row>
    </template>
    <!-- 满意 -->
    <template v-else>
      <van-row>
        <span
          class="w-full h-[30px] inline-flex items-center justify-center text-center text-[16px] mt-2 font-bold text-[#333]"
          >问题是否解决?
        </span>
      </van-row>
      <van-row :gutter="10">
        <van-col :span="12" class="flex flex-row justify-end items-center">
          <span
            @click="handleResolved"
            :class="
              resolvedState
                ? 'border-[#48a3ff] text-[#48a3ff]'
                : 'border-[#E5E5E5] text-[#666]'
            "
            class="inline-flex p-1 text-[13px] border-[1px] rounded justify-center items-center"
            >已解决</span
          >
        </van-col>
        <van-col :span="12" class="flex flex-row justify-start items-center">
          <span
            @click="handleReject"
            :class="
              !resolvedState
                ? 'border-[#48a3ff] text-[#48a3ff]'
                : 'border-[#E5E5E5] text-[#666]'
            "
            class="inline-flex p-1 text-[13px] border-[1px] rounded justify-center items-center"
            >未解决</span
          >
        </van-col>
      </van-row>
      <!-- 已解决直接提交 -->
      <!-- 未解决选择未解决原因 -->
      <template v-if="!resolvedState">
        <van-row :gutter="10" class="my-2">
          <van-col
            :span="12"
            v-for="(item, index) in unResolveReason"
            :key="item.id"
          >
            <span
              :class="
                active === index
                  ? 'border-[#48a3ff] text-[#48a3ff]'
                  : 'border-[#E5E5E5] text-[#666]'
              "
              class="w-full inline-flex h-[30px] mb-2 text-[12px] border-[1px] rounded justify-center items-center"
              @click.stop="handleChangeUnResolvedReason(item.content, index)"
              >{{ item.content }}</span
            >
          </van-col>
        </van-row>
        <van-row>
          <van-form ref="formRef" style="width: 100%">
            <van-field
              span="24"
              v-model="inputText"
              class="border-[#E5E5E5] border-[1px] rounded"
              rows="3"
              autosize
              name="inputText"
              type="textarea"
              maxlength="200"
              :rules="[{ required: true, message: '请提供宝贵意见' }]"
              show-word-limit
              label=""
              placeholder="希望您提供宝贵意见"
              @update:model-value="handleInput"
            />
          </van-form>
        </van-row>
      </template>
    </template>
    <van-button class="mt-3" type="primary" block @click="handleSubmit"
      >提交</van-button
    >
  </div>
</template>
<script setup lang="ts">
  import { evaluateState } from '@/plugins/constants'
  import { requestEvaluate } from '@/service'
  import { useChannelStore } from '@/store/channel'
  import { useChatStore } from "@/store/chat"
  import { useSessionStore } from '@/store/session'
  import { find, remove } from 'lodash'
  import { v7 as uuidv7} from 'uuid'
  import { showSuccessToast, showToast } from 'vant'
  import 'vant/es/toast/style'
  import { computed, reactive, ref, watch, type PropType } from 'vue'
  const active = ref(0)
  const props = defineProps({
    message: {
      type: Object as PropType<any>,
      default: () => {},
    },
  })
  const session = useSessionStore()
  const channel = useChannelStore()
  const chat = useChatStore()
  const rateText = ref()
  const rateValue = ref(5)
  watch(
    () => rateValue.value,
    (newValue) => {
      const rate = find(channel.evaluate.rate, { active: newValue })
      rateText.value = rate.text
    },
    {
      immediate: true,
    },
  )
  // 不满意原因
  const unReason = computed(() => {
    if (props.message.target === 'robot') {
      // 机器人不满意
      evaluateForm.unsatisfactionDesp = channel.evaluate.runSaDics[0].content // 默认机器人不满意原因
      return channel.evaluate.runSaDics
    } else {
      // 人工不满意
      evaluateForm.visitorDespSatisfaction =
        channel.evaluate.lunSaDics[0].content // 默认人工不满意原因
      return channel.evaluate.lunSaDics
    }
  })
  // 坐席id
  const agentId = computed(() => {
    if (props.message.target === 'robot') {
      // 机器人
      return ''
    } else {
      // 人工
      return props.message.agentId
    }
  })
  // 未解决原因
  const unResolveReason = computed(() => {
    if (props.message.target === 'robot') {
      // 机器人未解决
      evaluateForm.visitorDespUnresolved =
        channel.evaluate.runReSolves[0].content // 默认机器人未解决原因
      return channel.evaluate.runReSolves
    } else {
      // 人工未解决
      evaluateForm.unresolvedDesp = channel.evaluate.lunReSolves[0].content // 默认人工未解决原因
      return channel.evaluate.lunReSolves
    }
  })
  const inputText = ref()
  const evaluateForm = reactive({
    unsatisfactionDesp: undefined,
    visitorDespSatisfaction: undefined,
    unsatisfactionDespSpecifics: undefined,
    visitorDespSatisfactionSpecifics: undefined,
    visitorDespUnresolved: undefined,
    unresolvedDesp: undefined,
  })
  // 选择不满意原因
  function handleChangeReason(content, index) {
    active.value = index
    switch (props.message.target) {
      case 'robot':
        evaluateForm.unsatisfactionDesp = content
        break
      case 'agent':
        evaluateForm.visitorDespSatisfaction = content
        break
    }
  }
  // 选择未解决原因
  function handleChangeUnResolvedReason(content, index) {
    active.value = index
    switch (props.message.target) {
      case 'robot':
        evaluateForm.visitorDespUnresolved = content
        break
      case 'agent':
        evaluateForm.unresolvedDesp = content
        break
    }
  }
  function handleInput(content) {
    switch (props.message.target) {
      case 'robot':
        evaluateForm.unsatisfactionDespSpecifics = content
        break
      case 'agent':
        evaluateForm.visitorDespSatisfactionSpecifics = content
        break
    }
  }
  const resolvedState = ref(true)
  function handleResolved() {
    resolvedState.value = true
  }
  function handleReject() {
    resolvedState.value = false
  }
  function handleSubmit() {
    //满意度评分展示形式：0：笑脸 1：五星 2：小花 3：分值
    requestEvaluate({
      agentId: agentId.value,
      configId: session.configId,
      isEvaluate: 1,
      meetingId: session.meetingId,
      satisStatus: resolvedState.value ? '已解决' : '未解决',
      satisfactionValue: rateValue.value,
      type: props.message.evalType,
      satisfactionType: 1,
      ...evaluateForm,
    }).then((result: any) => {
      if (result.code === 0) {
        remove(chat.messages,{type: 'evaluate'})
        remove(chat.messages,{actionType: 'evaluate.complete'})
        chat.messages.push({
          role: 'system',
          type: 'text',
          actionType: 'evaluate.complete',
          id: uuidv7(),
          content: '感谢您对本次服务评价！'
        })
        showSuccessToast('感谢您的评价！')
        if (props.message.target === 'robot') {
          // 机器人完成
          session.updateRobotEvaluateState(evaluateState.complete)
        } else {
          // 人工完成
          session.updateAgentEvaluateState(evaluateState.complete)
        }
      } else {
        showToast(result.msg)
      }
    })
  }
</script>

<style scoped></style>
